<template>
  <div class="contanier">
        <van-tabbar v-model="active" @change="onChange">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="balance-list">订单</van-tabbar-item>
            <van-tabbar-item icon="location">攻略社区</van-tabbar-item>
            <van-tabbar-item icon="manager">我的</van-tabbar-item>
        </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
    name: 'vantabbar',
    components: {
        VanTabbar: Tabbar,
        VanTabbarItem: TabbarItem
    },
    data() {
        return {
            active: 0
        }
    },
    methods: {
        onChange(index) {
            console.log(index)
            switch (index) {
                case 0:
                    this.$router.push({
                        path: '/homepage'
                    })
                    break
                case 1:
                    this.$router.push({
                        path: '/order'
                    })
                    break
                case 2:
                    this.$router.push({
                        path: '/community'
                    })
                    break
                case 3:
                    this.$router.push({
                        path: '/mine'
                    })
                default:
                    break
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .contanier {
        position: fixed;
        bottom: 0;
    }
</style>